<template>
    <div>
        <a-tooltip placement="top" title="详情">
            <a-button @click="handClick" size="small" type="link">
                <ZSIcon icon="icon-xiangqing"></ZSIcon>
            </a-button>
        </a-tooltip>
        <a-modal v-model="visible" :title="staticData.titleName" width="90vw" @ok="handleOk"
            wrapClassName="modalInfoWrap">
            <div style="max-height: 66vh; overflow: auto;">
                <a-spin :spinning="loading">
                    <div class="work-detail-dialog-content">
                        <!-- 详情title -->
                        <div class="dialog-subtitle">
                            <span>山东省港口集团有限公司</span>
                            <span class="margin-left">审批编号：{{ staticData.businessId }}</span>
                        </div>
                        <!-- 详情body -->
                        <div class="dialog-body">
                            <a-row :gutter="40">
                                <a-col v-for="item in staticData.componentValueDataEntityList" :key="item.id" :span="['DDPhotoField', 'SignatureField', 'TableField', 'TextNote'].includes(
                                    item.componentType
                                )
                                    ? 24
                                    : 12
                                    ">
                                    <div class="detail-prop">
                                        <div v-if="item.componentType !== 'TextNote'">
                                            <div class="detail-prop-title">
                                                <a-tooltip :title="item.name">
                                                    <span class="one">{{ item.name }}</span>
                                                </a-tooltip>
                                            </div>
                                            <!-- 图片类型 -->
                                            <div v-if="item.componentType == 'DDPhotoField'"
                                                class="detail-prop-pics scrollX" v-viewer.static="{ title: false }">
                                                <img v-for="img in item.value" :key="img" class="detail-prop-pics__item"
                                                    style="object-fit: cover" :src="img" />
                                                <div class="empty-box" v-if="item.value.length <= 0">暂无图片</div>
                                            </div>
                                            <!-- 签名 -->
                                            <div v-else-if="item.componentType == 'SignatureField'"
                                                class="detail-prop-pics scrollX"
                                                v-viewer.static="{ title: false, className: 'bg-light' }">
                                                <!-- <img class="detail-prop-pics__item signature" style="object-fit: cover"
                                                    :src="item.value" /> -->
                                                <div class="detail-prop-pics__item signature">
                                                    <ShowBase :value="item.value"></ShowBase>
                                                </div>
                                                <div class="empty-box" v-if="!item.value">暂无图片</div>
                                            </div>
                                            <!-- 列表 -->
                                            <a-row v-else-if="item.componentType == 'TableField'">
                                                <a-col v-for="list in item.value" :key="list.rowNumber">
                                                    <div v-for="row in list.rowValue" :key="row.key"
                                                        class="detail-prop-value detail-prop-sub">
                                                        <div class="detail-prop-sub__label">{{ row.label }}</div>
                                                        <div class="detail-prop-sub__value">
                                                            <div v-if="/DDPhotoField/.test(row.key)"
                                                                class="detail-prop-pics scrollX"
                                                                v-viewer.static="{ title: false }">
                                                                <img v-for="img in row.value" :key="img"
                                                                    class="detail-prop-pics__item"
                                                                    style="object-fit: cover" :src="img" />
                                                            </div>
                                                            <span v-else>{{ row.value }}</span>
                                                        </div>
                                                    </div>
                                                </a-col>
                                            </a-row>
                                            <div v-else class="detail-prop-value">
                                                {{ item.value }}
                                            </div>
                                        </div>
                                        <div v-else class="detail-prop-textnode">{{ item.value }}</div>
                                    </div>
                                </a-col>
                            </a-row>
                            <!-- 审批 -->
                            <div class="approval-flow-wrapper" v-if="
                                staticData.operationRecordDataEntityList && staticData.operationRecordDataEntityList.length
                            ">
                                <ApprovalFlow :data="staticData.operationRecordDataEntityList"></ApprovalFlow>
                            </div>
                        </div>
                    </div>
                </a-spin>
            </div>
        </a-modal>
    </div>
</template>
<script>
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';
import ApprovalFlow from '@/components/Process/ApprovalFlow.vue';
import * as dayjs from 'dayjs';
import ShowBase from '@/components/ShowBase/ShowBase';

export default {
    name: 'ShowModal',
    components: { ZSIcon, ApprovalFlow, ShowBase },
    props: {
        record: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            visible: false,
            staticData: {},
            imgs: [],
            loading: false,
        }
    },
    methods: {
        handClick() {
            this.staticData = {};
            this.imgs = [];
            this.visible = true;
            this.getData();
        },
        onClose() {
            this.visible = false
        },
        handleOk() {
            this.visible = false
        },
        getData() {
            let params = {
                id: this.record.id
            }
            this.loading = true;
            this.getAxios(this.$queryFormDataInfo, params).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    let { ccUserNames, imgUrls, componentValueDataEntityList, operationRecordDataEntityList } =
                        data;
                    ccUserNames = JSON.parse(ccUserNames || '[]');
                    imgUrls = imgUrls || [];
                    this.staticData = {
                        ...data,
                        imgUrls,
                        ccUserNames,
                        componentValueDataEntityList: componentValueDataEntityList
                            .map(item => {
                                if (item.componentType === 'DDDateRangeField') {
                                    item.name = JSON.parse(item.name).join('，');
                                    item.value = JSON.parse(item.value).slice(0, 2).join('，');
                                }
                                if (item.componentType === 'DDMultiSelectField') {
                                    item.value = JSON.parse(item.value).join('，');
                                }
                                if (item.componentType === 'DDPhotoField' || item.componentType == 'TableField') {
                                    item.value = JSON.parse(item.value);
                                }
                                if (item.componentType === 'TimeAndLocationField') {
                                    item.name = JSON.parse(item.name).join('，');
                                    const value = JSON.parse(item.value);
                                    item.value = `${value[0]}，${value[3]}`;
                                }

                                return item;
                            }),
                        operationRecordDataEntityList: operationRecordDataEntityList.map(item => {
                            if (item.type == 'PROCESS_CC' && item.ccUserNames) {
                                item.ccUserNames = JSON.parse(item.ccUserNames);
                            }
                            item.date = dayjs(item.date).format('MM-DD HH:mm');
                            return item;
                        }),
                    };
                }
            }).finally(() => {
                this.loading = false;
            });
        },
        getPopupContainer(trigger) {
            return trigger.parentElement;
        },
    },
    mounted() {
    }
}
</script>
<style lang="less" scoped>
.imgCon {
    .title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }
}

::v-deep {
    .ant-modal-body {
        padding: 0px 24px;
    }

}

.work-detail-dialog-content {

    .dialog-subtitle {
        font-size: 14px;
        font-weight: 400;
        padding: 12px 0px;
    }

    .dialog-body {
        // max-height: 643px;
        overflow: hidden;
        overflow-y: auto;
        max-height: calc(60vh + 10px);
        min-height: 20px;

        &::-webkit-scrollbar {
            display: none;
        }

        .detail-row {
            // display: flex;
            // flex-wrap: wrap;
        }

        .detail-prop {
            margin-bottom: 28px;

            .detail-prop-title {
                display: flex;
                align-items: center;
                height: 40px;
                padding-left: 54px;
                font-size: 18px;
                font-weight: 900;
                background: url(~@/assets/svg/detail-prop-title-bg.svg);
                background-repeat: no-repeat;
                background-position: left center;
                color: #ffffff;
            }

            .detail-prop-value {
                margin-top: 6px;
                padding: 6px 12px;
                font-size: 16px;
                font-weight: 500;
                // color: #ffffff;
                // background: #213d6d;
                background: #cdcdcd;
                line-height: 1.5;
            }

            .detail-prop-textnode {
                font-size: 18px;
                color: #000000;
                line-height: 1.5;
            }

            .detail-prop-sub {
                display: flex;
                justify-content: space-between;

                .detail-prop-sub__label {
                    font-weight: bold;
                }

                .detail-prop-sub__value {
                    max-width: 50%;

                    .detail-prop-pics {
                        padding-top: 0;
                    }
                }
            }

            .detail-prop-pics {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding: 8px 0 5px;

                .detail-prop-pics__item {
                    width: 120px;
                    height: 120px;
                    flex: 0 0 120px;
                    margin-right: 14px;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    cursor: pointer;
                    border-radius: 10px;
                    overflow: hidden;

                    &:last-child {
                        margin-right: 0;
                    }

                    &.signature {
                        background: #fff;
                    }
                }
            }

            .empty-box {
                padding-left: 19px;
                font-size: 14px;
            }
        }

        .approval-flow-wrapper {
            border-top: 1px solid;
        }
    }
}

::v-deep {
    .approval-flow {
        color: #000000;
        padding-top: 12px;
    }

    .approval-flow-item-tail {
        border-left: 6px solid rgba(0, 0, 0, 0.15) !important;
    }

    .user-avatar {
        .user-avatar-name {
            color: #ffffff;
        }
    }
}
</style>